import React, {Component} from 'react';
import { Link } from 'umi';
import { Layout, Menu } from 'antd';
import { UserOutlined } from '@ant-design/icons';

const { Header, Footer, Sider, Content } = Layout;
const { SubMenu } = Menu;

export default class BaseLayout extends Component {
  state = {
    collapsed: false,
  };

  // 定义一个箭头函数 onCollapse
  onCollapse = (collapsed) => {
    console.log(collapsed);
    this.setState({ collapsed });
  };

  render() {
    return (
      <Layout style={{minHeight: '100vh'}}>
        {/* 侧边栏 */}
        <Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
          {/* logo */}
          <div className='logo' style={{height: '32px', background: 'gray', margin: '16px'}} />
          {/* 菜单 */}
          <Menu theme='dark'
            /* 默认打开的子菜单 */
                defaultOpenKeys={['user']}
            /* 默认选中的菜单项目 */
                defaultSelectedKeys={['user_1']}
                mode='inline'>
            <SubMenu key='user' icon={<UserOutlined />} title='用户管理'>
              <Menu.Item key="user_1"><Link to="/user/list">用户列表</Link></Menu.Item>
              <Menu.Item key="user_2"><Link to="/user/add">添加用户</Link></Menu.Item>
            </SubMenu>
          </Menu>
        </Sider>
        <Layout>
          <Header className="site-layout-background"
                  style={{ background: '#fff', textAlign: 'center', padding: 0 }}>
            React & Ant Design & Umi
          </Header>
          <Content style={{ margin: '24px 16px 0', padding: 24, background: '#fff' }}>
            {this.props.children}
          </Content>
          <Footer style={{ textAlign: 'center' }}>design by aBadString</Footer>
        </Layout>
      </Layout>
    );
  }
}